<template>
  <div class="map">
    <header>
      <van-icon name="arrow-left" @click="$router.go(-1)" />
      <h3>地图找房</h3>
      <i></i>
    </header>
    <main>
      <baidu-map class="map" :center="{ lng: 116.404, lat: 39.915 }" :zoom="7">
        <bm-marker
          :position="{ lng: 116.404, lat: 39.915 }"
          :dragging="true"
          animation="BMAP_ANIMATION_BOUNCE"
        >
          <bm-label
            content="我爱北京天安门"
            :labelStyle="{ color: 'red', fontSize: '14px' }"
            :offset="{ width: -35, height: 30 }"
          />
          <!-- 比例尺 -->
          <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
          <!-- 缩放 -->
           <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
        </bm-marker>
      </baidu-map>
    </main>
  </div>
</template>

<script>
</script>

<style lang='scss' scoped>
.map {
  width: 100%;
  height: 100%;
  position: absolute;
  header {
    width: 100%;
    height: 1rem;
    border-bottom: 1px solid #eee;
    background-color: #f6f5f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.3rem;
    h3 {
      font-weight: normal;
    }
  }
}
.baidumap {
  width: 1000px;
  height: 500px;
  border: 1px solid red;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
  display: none !important;
}
.baidumap > .anchorBL {
  display: none !important;
}
</style>